<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品修改</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
<!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--font-awesome.css?v=4.4.0-->
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!--iCheck/custom.css-->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/plugins/iCheck/custom.css"/>
    <!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--style.css-->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css"/>
    <!--jquery.min.js-->
	<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
    <!--Huploadify.css-->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>js/plugins/Huploadify/Huploadify.css"/>
    
    <style type="text/css">
    	.cuowu{
    		margin: 0;
    	}
    </style>
     <script>
        $(function () {
            $('.imageUpload').each(function(){
                var aa = function(obj){
                    obj.Huploadify({
                        auto:true,
                        fileTypeExts:'*.jpg;*.png;',
                        multi:true,
                        //formData:{name:'image0'},
                        fileSizeLimit:9999,
                        showUploadedPercent:true,//是否实时显示上传的百分比，如20%
                        showUploadedSize:true,
                        removeTimeout:9999999,
                        uploader:'${pageContext.request.contextPath}/GoodsServlet/picture',
                        onUploadComplete:function(file,data,response){
                            //获得回填数据
//                            data_json=eval("("+data+")");
                            src = "${pageContext.request.contextPath}"+data;
                            //此处obj为上传控件  ,代表每个imageUpload
                            //回填表单
//                            obj.prev().val(data_json.path);
                            //填充预览图
                            obj.before('<input type="hidden" name="xx" value="'+data+'">');
                           // obj.after('<img src="'+src+'"/>');
                            $('img').attr('src',src);
                            $('#picture').val(src);
//                            obj.next().html("<img src='"+src+"'/>");
                            setTimeout(function(){
                                obj.find('.uploadify-queue-item').html('');
                            },1000);
                        }
                    });
                }
                aa($(this));
            });
        });
    </script>
</head>
<body class="gray-bg" style="background-color:#FCF8F5;">
				<div class="ibox-content" style="background-color:#FCF8F5 ;">
					<form method="post" target="" enctype="multipart/form­data" action="${pageContext.request.contextPath}/GoodsServlet/editGoods" class="form-horizontal" id="zhuce">
						<div style="float: left;border: 0px solid red;">
							<input type="hidden" name="picture" id="picture" />
							<div style="width: 400px;margin-left: 30px;" id="form-group">
								<div class="input-group m-b cuowu"><span class="input-group-addon" style="background-color: #3F9CDD;color: white;">商品编码</span>
									<div class="has-warning">
										<input type="text"  id="goods_id" name="goods_id" readonly class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height:16px;"></div>
							</div>
							<div style="width: 400px;margin-left: 30px;" id="form-group">
								<div class="input-group m-b cuowu"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">商品名称</span>
									<div class="has-warning">
										<input type="text" id="goods_name" name="goods_name" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div id="goodsName" style="height: 16px;"></div>
							</div>
							<div style="width: 400px;margin-left: 30px;" id="form-group">
								<div class="input-group m-b cuowu"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">商品价格</span>
									<div class="has-warning">
										<input type="text"  id="goods_price" name="goods_price" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div id="goodsPrice" style="height: 16px;"></div>
							</div>
							<div style="width: 400px;margin-left: 30px;" id="form-group">
								<div class="input-group m-b cuowu"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">商品库存</span>
									<div class="has-warning">
										<input type="text" id="goods_count" name="goods_count" class="form-control  cuowu" style="height: 36px;">
									</div>
								</div>
								<div id="goodsCount" style="height: 16px;"></div>
							</div>
							<div style="width: 400px;margin-left: 30px;">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">商品类型</span>
									<div class="has-warning">
											<select name="gtype_id" id="gtype" class="form-control">
												
											</select>
									</div>
								</div>
							</div>
						
							<div style="width: 650px;margin-left: 30px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">商品描述</span>
									<div class="has-warning">
										<textarea type="textarea" id="goods_desc" name="goods_desc" class="form-control cuowu"  rows="5" cols="10"></textarea>
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
							</div>	
							<input type="hidden" name="picsrc" id="picsrc" />
							<div style="float: left;border: 0px solid green;margin-left: -230px;">
								<img src="" style="border-radius:10%" width="230" height="210" alt="商品图片" />
								<div class="text-center" style="margin-top: 3px;"> <div  id="shangchuan" class="imageUpload"></div></div>
							</div>
					</form>
					
				</div>


<!--bootstrap.min.js-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--content.js-->
<script src="<%=basePath%>js/content.js" type="text/javascript" charset="utf-8"></script>
<!--icheck.min.js-->
<script src="<%=basePath%>js/plugins/iCheck/icheck.min.js" type="text/javascript" charset="utf-8"></script>
<!--jquery.validate.min.js-->
<script src="<%=basePath%>js/plugins/validate/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
<!--messages_zh.min.js-->
<script src="<%=basePath%>js/plugins/validate/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
<!--form-validate-demo.js-->
<script src="<%=basePath%>js/demo/form-validate-demo.js" type="text/javascript" charset="utf-8"></script>
<!--jquery.Huploadify.js-->
<script src="<%=basePath%>js/plugins/Huploadify/jquery.Huploadify.js" type="text/javascript" charset="utf-8"></script>
<script>
$(':text').each(function(){
	$(this).blur(function(){
		if($(this).val()!=''){
			$(this).css("border","1px solid #1AB394");
		}else{
			if($(this).attr('name')=='user_tuijian'||$(this).attr('name')=='user_email'){
				$(this).css("border","1px solid #F8AC59");
			}else{
				$(this).css("border","1px solid red");
			}
			
			
		}
	});
});
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
    });
    $(':text').each(function(){
    	$(this).blur(function(){
    		if($(this).val()!=''){
    			$(this).css("border","1px solid #1AB394");
    		}else{
    			if($(this).attr('name')=='user_tuijian'||$(this).attr('name')=='user_email'){
    				$(this).css("border","1px solid #F8AC59");
    			}else{
    				$(this).css("border","1px solid red");
    			}
    			
    			
    		}
    	});
    });
    //ajax动态获取要修改的商品信息
    $.get('${pageContext.request.contextPath}/GoodsServlet/preEditGoods',{"goods_id":${param.goods_id}},function(data){
    	var goodsInfo = JSON.parse(data);
    	
    	var ops = "";
    	for(var i = 0;i<goodsInfo[1].length;i++){
    		ops += "<option  value='"+goodsInfo[1][i].gtype_id+"'>"+goodsInfo[1][i].gtype_name+"</option>";
    	}
    	$('#gtype').html(ops);
    	$("#gtype option[value='"+goodsInfo[0].gtype_id+"']").remove(); //删除Select中Value=''的Option
    	$('#gtype').prepend("<option value='"+goodsInfo[0].gtype_id+"' selected>"+goodsInfo[0].gtype_name+"</option>");
    	
    	$('#goods_id').val(goodsInfo[0].goods_id);
    	$('#goods_name').val(goodsInfo[0].goods_name);
    	$('#goods_price').val(goodsInfo[0].goods_price);
    	$('#goods_count').val(goodsInfo[0].goods_count);
    	$('#goods_desc').text(goodsInfo[0].goods_desc);
    	$('img').attr('src',goodsInfo[0].goods_img);
    	$('#picsrc').val(goodsInfo[0].goods_img);
    });
    
    
    
    //商品名称验证
    $('#goods_name').focus(function(){
    	$('#xingming').remove();
    	if($('#goods_name').val()==''){
    		$('#goodsName').html("<span  id='xingming' style='margin-top:-20px;margin-left:80px;color:gray;'><i style='color:gray;' class='fa fa-info-circle'></i>请输入商品名称</span>");
    	}
    });
    $('#goods_name').blur(function(){
    	$('#xingming').remove();
    	if($('#goods_name').val()==''){
    		$('#goodsName').html("<span  id='xingming' style='margin-top:-20px;margin-left:80px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>商品名不能为空</span>");
    	}else{
    		$('#xingming').remove();
			$('#goodsName').html("<span  id='xingming' style='margin-top:-20px;margin-left:80px;color:green;'><i style='color:green;' class='fa fa-check'></i></span>");
    	}
    });
    //商品价格验证
     $('#goods_price').focus(function(){
    	$('#jiage').remove();
    	if($('#goods_price').val()==''){
    		$('#goodsPrice').html("<span  id='jiage' style='margin-top:-20px;margin-left:80px;color:gray;'><i style='color:gray;' class='fa fa-info-circle'></i>请输入商品商品价格</span>");
    	}
    });
    $('#goods_price').blur(function(){
    	$('#jiage').remove();
    	if($('#goods_price').val()==''){
    		$('#goodsPrice').html("<span  id='jiage' style='margin-top:-20px;margin-left:80px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>商品价格未填写</span>");
    	}else if( !/^[0-9]+$/.test($('#goods_price').val())&&!/^\-?[0-9]*\.?[0-9]*$/.test($('#goods_price').val())){
    		$('#jiage').remove();
    		$('#goodsPrice').html("<span  id='jiage' style='margin-top:-20px;margin-left:80px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>商品价格不正确</span>");
    		$('#goods_price').css("border","1px solid red");
    	}
    	else{
    		$('#jiage').remove();
			$('#goodsPrice').html("<span  id='jiage' style='margin-top:-20px;margin-left:80px;color:green;'><i style='color:green;' class='fa fa-check'></i></span>");
    	}
    });
</script>

</body>

</html>
